<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <script src="../js/vue2-dev.js"></script>
        <style>
            .basic {
                border: 1px solid green;
            }
            .font20 {
                font-size: 20px;
            }

            .font40 {
                font-size: 40px;
            }

            .font60 {
                font-size: 60px;
            }

            .arr1 {
                background-color: aqua;
            }

            .arr2 {
                color: yellowgreen;
            }

            .arr3 {
                border-radius: 20px;
            }
        </style>
    </head>
    <body>
        <!-- 
            动态绑定class属性使用 v-bind:class 即可
            1.字符串写法：适用于：样式名不确定，需要动态指定
                1.首先在data中给定一个class占位变量，先通过v-bind:class（可简写成:class）绑定到对应元素上
                2.然后通过在methods中随机给出class样式数组中的某一个（随机数即可）
            2.数组写法：适用于：样式个数不确定，样式名不确定
                1.在data中声明一个属性数组，通过v-bind:class（可简写成:class）绑定到对应的元素上
                2.然后通过在methods中对数组进行增(push)删(pop)操作修改属性数组内容，再绑定到对应元素上
            3.对象写法：适用于：样式个数确定，样式名确定，但是不确定要不要使用
                1.在data中声明一个属性对象，通过v-bind:class（可简写成:class）绑定到对应的元素上
                2.在data的属性对象中，key为style样式的名字，value是布尔值，true表示启用，false表示禁用
         -->

        <div id="root1">
            <button @click="changeFont">点击我随意改变字体大小</button>
            <h1 class="basic" :class="font">hahaha...</h1>
        </div>
        <hr />
        <div id="root2">
            <button @click="addStyle">点我添加样式</button>
            <h1 class="basic" :class="styleArr">hahaha...</h1>
        </div>
        <hr />
        <div id="root3">
            <h1 class="basic" :class="styleObj">hahaha...</h1>
        </div>

        <script>
            const vm1 = new Vue({
                data: {
                    font: "font20",
                },
                methods: {
                    changeFont() {
                        fontArr = ["font20", "bfont40", "font60"];
                        this.font = fontArr[[Math.floor(Math.random() * 3)]];
                    },
                },
            });

            vm1.$mount("#root1");
        </script>
        <script>
            const vm2 = new Vue({
                data: {
                    styleArr: [],
                    add: true,
                },
                methods: {
                    addStyle() {
                        if (this.styleArr.length == 3) {
                            add = false;
                        } else if (this.styleArr.length == 0) {
                            add = true;
                        }
                        if (add) {
                            this.styleArr.push(
                                "arr" + (this.styleArr.length + 1)
                            );
                        } else {
                            this.styleArr.pop();
                        }
                    },
                },
            });
            vm2.$mount("#root2");
        </script>
        <script>
            const vm3 = new Vue({
                data: {
                    styleObj: {
                        arr1: false,
                        arr2: false,
                        arr3: false,
                    },
                },
            });

            vm3.$mount("#root3");
        </script>
    </body>
</html>
